<template>
    <div class="app-container">
        <el-form :inline="true" ref="queryRef" label-position="right" :model="params" label-width="200px">
            <div class="form-inline">
                <el-row justify="center">
                    <el-col :span="11">
                        <el-form-item label="区域：" class="form-item" prop="region">
                            <el-form-item prop="province" style="width:120px;margin-right:10px;">
                                <el-select v-model="params.province" placeholder="请选择省" @change="chooseProvince"
                                    value-key="id">
                                    <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="city" style="width:120px;margin-right:10px;">
                                <el-select v-model="params.city" placeholder="请选择市" @change="chooseCity" clearable
                                    value-key="id">
                                    <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="county" style="width:120px;">
                                <el-select v-model="params.county" placeholder="请选择县" @change="chooseCounty" clearable
                                    value-key="id">
                                    <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="结构类型：">
                            <el-select v-model="params.structureType" placeholder="请选择" class="form-select" clearable>
                                <el-option v-for="item in structureTypeOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row justify="center">
                    <el-col :span="11">
                        <el-form-item label="维护人：" class="form-item" prop="userName">
                            <el-input v-model="params.userName" placeholder="请输入" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="维护时间:">
                            <el-col :span="11">
                                <el-form-item prop="createStartTime">
                                    <el-date-picker clearable v-model="params.createStartTime" type="date"
                                        placeholder="开始时间" value-format="YYYY-MM-DD" :disabled-date="startDisableDate"
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="1" class="text-center">
                                <span class="text-gray-500">-</span>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item prop="createEndTime">
                                    <el-date-picker clearable v-model="params.createEndTime" type="date" placeholder="结束时间"
                                        value-format="YYYY-MM-DD" :disabled-date="endDisableDate" style="width: 100%" />
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row justify="center">
                    <el-col :span="11">
                        <el-form-item label="设防情况：" class="form-item" prop="fortification">
                            <el-select v-model="params.fortification" placeholder="请选择" class="form-select" clearable>
                                <el-option v-for="item in fortificationOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="年代：" class="form-item" prop="years">
                            <el-select v-model="params.years" placeholder="请选择" class="form-select" clearable>
                                <el-option v-for="item in yearsOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row justify="center">
                    <el-col :span="11">
                        <el-form-item label="用途：">
                            <el-col :span="11">
                                <el-form-item prop="use0">
                                    <el-select v-model="params.use0" placeholder="请选择" class="form-select"
                                        @change="useChange" clearable>
                                        <el-option v-for="item in useOptions" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="1" class="text-center">
                                <span class="text-gray-500">-</span>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item prop="use1">
                                    <el-select v-model="params.use1" placeholder="请选择" class="form-select" clearable>
                                        <el-option v-for="item in use1Options" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11"></el-col>
                </el-row>
                <el-row justify="end">
                    <el-form-item class="bottom-button">
                        <el-button type="primary" @click="onSearch">查询</el-button>
                        <el-button type="primary" @click="onRest">重置</el-button>
                    </el-form-item>
                </el-row>
            </div>
        </el-form>

        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="饼状图" name="first">
                <!-- echarts图表 -->
                <el-row :gutter="20">
                    <!-- <el-col :span="16">
                        <div class="region">
                            <h4>区域</h4>
                            <div id="region-pie" style="width: 100%;height:420px;"></div>
                        </div>
                    </el-col> -->
                    <el-col :span="8">
                        <div class="years">
                            <h4>年代</h4>
                            <div id="years-pie" style="width: 100%;height:420px;"></div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="structureType">
                            <h4>结构类型</h4>
                            <div id="structureType-pie" style="width: 100%;height:420px;"></div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="fortification">
                            <h4>设防情况</h4>
                            <div id="fortification-pie" style="width: 100%;height:420px;"></div>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top:30px">
                    <el-col :span="8">
                        <div class="use">
                            <h4>用途</h4>
                            <div id="use-pie" style="width: 100%;height:420px;"></div>
                        </div>
                    </el-col>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="柱状图" name="second">
                <!-- echarts图表 -->
                <el-row :gutter="20">
                    <!-- <el-col :span="16">
                        <div class="region">
                            <h4>区域</h4>
                            <div id="region-bar" style="width: 1100px;height:420px;"></div>
                        </div>
                    </el-col> -->
                    <el-col :span="8">
                        <div class="years">
                            <h4>年代</h4>
                            <div id="years-bar" style="width: 100%;height:420px;"></div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="structureType">
                            <h4>结构类型</h4>
                            <div id="structureType-bar" style="width: 100%;height:420px;"></div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="fortification">
                            <h4>设防情况</h4>
                            <div id="fortification-bar" style="width: 100%;height:420px;"></div>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top:30px">
                    <el-col :span="8">
                        <div class="use">
                            <h4>用途</h4>
                            <div id="use-bar" style="width: 100%;height:420px;"></div>
                        </div>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { nextTick, reactive, toRefs } from "vue";
// 引入接口
import { getInfo } from '@/api/login';
import { getUserId } from "@/utils/auth";
import { buildingCsVulnerability } from "@/api/compreVisualAnalysis/compreVisualAnalysis.js";
// 引入行政区划相关接口
import { getProvince, getChildArea } from "@/api/system/division";
// 引入echarts
import * as echarts from "echarts";
// 引入store
import useDictStore from '@/store/modules/dict';
// 引入处理图表数据
import { dataStructureChange, structureData, dataYearChangeBuild, yearDataBuild, dataLifeFortificationChange, lefeFortificationData, dataUseChange, useData, getNewArr } from "../changeData.js"
const dictStore = useDictStore();

// 当前对象实例
const { proxy } = getCurrentInstance();

const data = reactive({
    // 表单参数
    params: {
        createStartTime: "", //维护开始时间
        createEndTime: "",//维护结束时间
        userName: "", //维护人
        structureType: "", //结构类型
        fortification: "", //设防情况
        years: "",//年代
        region: "",//区域
        use0: "",//用途
        use1: "",
        province: "",//省
        city: "",//省
        county: "",//省
    },
    //设防情况：请选择、未设防、6度、7度、8度、9度、自设防、其他
    fortificationOptions: dictStore.fortificationOptions || [],
    // 年代候选值：请选择、1978年以前、1978-1989年、1989-2001年、2001-2010年、2010-2016年、2016年以后
    yearsOptions: dictStore.yearsOptions || [],
    // 结构类型
    structureTypeOptions: dictStore.structureTypeList || [],
    // 用途
    useOptions: [
        {
            value: '第Ⅰ类',
            label: '第Ⅰ类',
            children: [
                {
                    value: '住宅',
                    label: '住宅',
                }, {
                    value: '公寓',
                    label: '公寓',
                }, {
                    value: '学生和职工集体宿舍',
                    label: '学生和职工集体宿舍',
                }, {
                    value: '宾馆',
                    label: '宾馆',
                }, {
                    value: '招待所',
                    label: '招待所',
                }, {
                    value: '其他人员居住场所',
                    label: '其他人员居住场所',
                }]
        }, {
            value: '第Ⅱ类',
            label: '第Ⅱ类',
            children: [
                {
                    value: '办公室',
                    label: '办公室',
                }, {
                    value: '生产车间',
                    label: '生产车间',

                }, {
                    value: '教室',
                    label: '教室'
                }, {
                    value: '其他工作与学习场所',
                    label: '其他工作与学习场所',
                }]
        }, {
            value: '第Ⅲ类',
            label: '第Ⅲ类',
            children: [{
                value: '除I、II类以外',
                label: '除I、II类以外'
            }]
        }
    ],
    use1Options: [],
})
const {
    params,
    fortificationOptions,
    yearsOptions,
    structureTypeOptions,
    useOptions,
    use1Options,
} = toRefs(data);

// 行政区划
const provinceData = ref([]); //省
const cityData = ref([]); //市
const areaData = ref([]); //区、县
/** 获取省列表 */
function getProvinceData() {
    getProvince().then((response) => {
        provinceData.value = response.data;
        getUserInfo()
    });
}
// 选择省份
function chooseProvince(value) {
    params.value.city = null;
    params.value.county = null;
    params.value.province = value.name;
    cityData.value = [];
    areaData.value = [];
    getChildArea(value.id).then(response => {
        cityData.value = response.data;
    });
}
// 选择城市
function chooseCity(value) {
    params.value.city = value.name;
    params.value.county = null;
    areaData.value = [];
    getChildArea(value.id).then((response) => {
        areaData.value = response.data;
    });
}
// 选择区县
function chooseCounty(value) {
    params.value.county = value.name;
}

// 当前tab
const activeName = ref('first')
// tab切换事件
const handleClick = (tab, event) => {
    onSearch();
    console.log(tab, event)
}

// 时间区间可选区域控制
const startDisableDate = (time) => {
    let endDateVal = params.value.createEndTime
    if (endDateVal) {
        return time.getTime() > new Date(endDateVal).getTime()
    }
}
const endDisableDate = (time) => {
    let beginDateVal = params.value.createStartTime
    if (beginDateVal) {
        return time.getTime() < new Date(beginDateVal).getTime()
    }
}

// 用途选择
const useChange = (val) => {
    const use = useOptions.value.find(item => item.value === val)
    if (use) {
        use1Options.value = use.children
    }
}
// 获取用户
function getUserInfo() {
    getInfo(getUserId()).then(response => {
        // params.value.userName = response.user.userName
        params.value.province = provinceData.value.filter(item => item.id == response.user.provinceId)[0].name;
        let provinceId=response.user.provinceId;
        let provincename=params.value.province;
        if(mapToProvince!=null){
            provincename=mapToProvince.value;
            provinceId=provinceData.value.filter(item => item.name == mapToProvince.value)[0].id;
        }
        chooseProvince({id:provinceId,name:provincename})

        //chooseProvince({id:response.user.provinceId,name:params.value.province})

        mapToProvince=null;
        //params.value.maintainerUnit = response.user.orgName
        //params.value.createTime = parseTime(new Date())
    });
};

const route = useRoute();

// 获取地图切换过来的省名称
let mapToProvince = computed(() => (route.query.province));

//建筑物易损性综合统计
const onSearch = () => {
    let query = params.value;
    //mapToProvince=null;
    proxy.$modal.loading('加载中...');
    buildingCsVulnerability(query).then((res) => {
        proxy.$modal.closeLoading();
        if (res.code === 200) {
            console.log(res)
            //饼状图
            buildChartYearsPie(res.data.years)
            // buildChartRegionPie(res.data.city)
            buildChartStructureTypePie(res.data.structureType)
            buildChartFortificationPie(res.data.fortification)
            buildChartUsePie(res.data.use)
            //柱状图
            buildChartYearsBar(res.data.years)
            // buildChartRegionBar(res.data.city)
            buildChartStructureTypeBar(res.data.structureType)
            buildChartFortificationBar(res.data.fortification)
            buildChartUseBar(res.data.use)
        }
    }).catch(err => {
        proxy.$modal.closeLoading();
        console.log(err);
    });
};

let m_chartPie = null
let m_chartBar = null
// 饼状图
//区域region-pie
const buildChartRegionPie = (data) => {
    const keys = Object.keys(data)
    const pieData = []
    keys.forEach(key => {
        pieData.push({
            name: key,
            value: data[key]
        })
    })
    echarts.init(document.getElementById('region-pie')).dispose() ;
    var m_chartPie = echarts.init(document.getElementById('region-pie'));
    var pieOption = {
        // title: {
        //     text: '易损性数据个数',
        //     left: 'center'
        // },
        tooltip: {
            trigger: 'item',
            enterable: true,
            formatter (res) {
              const dom = '<div>'+`${res.data.name}`+ '<br/>'+ `数量：${res.data.value}(个)` + '<br/>' + `占比：${res.percent}(%)` + '</div>'
              return dom
            }
        },
        legend: {
            bottom: 10,
            left: 'center',
        },
        // color: ['#5ad8a6', '#5b8ff9', '#9479c3', '#f6bd16', '#f9c956', '#75bedc'],
        color: ['#9479c3', '#5ad8a6', '#9b460c', '#4270c1', '#5b8ff9', '#f6bd16', '#245c8f', '#ee4dd3'],
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '50%',     //半径
                //具体数据
                data: pieData,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                    }
                }
            }
        ]
    }
    m_chartPie.setOption(pieOption); // 区域隐藏
    window.addEventListener('resize', () => {
        m_chartPie.resize();
    });
}
//年代years-pie
const buildChartYearsPie = (data) => {
    const keys = Object.keys(data)
    const pieData = []
    keys.forEach(key => {
        dataYearChangeBuild(pieData, data, key)
        // switch (key) {
        //     case '1989-2001年':
        //     pieData[0] = {'name':key,'value':data[key]}
        //         break;
        //     case '2001-2010年':
        //     pieData[1] = {'name':key,'value':data[key]}
        //         break;
        //     case '1978年以前':
        //     pieData[2] = {'name':key,'value':data[key]}
        //         break;
        //     case '2010-2016年':
        //     pieData[3] = {'name':key,'value':data[key]}
        //         break;
        //     case '1978-1989年':
        //     pieData[4] = {'name':key,'value':data[key]}
        //         break;
        //     case '2001年以后':
        //     pieData[5] = {'name':key,'value':data[key]}
        //         break;
        //     default:
        //         break;
        // }
    })
    echarts.init(document.getElementById('years-pie')).dispose() ;
    var m_chartPie = echarts.init(document.getElementById('years-pie'));
    var pieOption = {
        // title: {
        //     text: '易损性数据个数',
        //     left: 'center'
        // },
        tooltip: {
            trigger: 'item',
            enterable: true,
            formatter (res) {
              const dom = '<div>'+`${res.data.name}`+ '<br/>'+ `数量：${res.data.value}(个)` + '<br/>' + `占比：${res.percent}(%)` + '</div>'
              return dom
            }
        },
        legend: {
            //orient: 'vertical',
            bottom: 10,
            left: 'center',
            data: yearDataBuild()
            // data:['1989-2001年','2001-2010年','1978年以前','2010-2016年','1978-1989年','2001年以后']
        },
        // color: ['#9479c3', '#5ad8a6', '#5b8ff9', '#f6bd16'],
        color: ['#9479c3', '#5ad8a6', '#9b460c', '#4270c1', '#5b8ff9', '#f6bd16', '#245c8f', '#ee4dd3'],
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '50%',     //半径
                //具体数据
                data: pieData,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
            }
        ]
    }
    m_chartPie.setOption(pieOption);
    window.addEventListener('resize', () => {
        m_chartPie.resize();
    });
}
//结构类型structureType-pie
const buildChartStructureTypePie = (data) => {
    const keys = Object.keys(data)
    const pieData = []
    keys.forEach(key => {
        dataStructureChange(pieData, data, key)
        // switch (key) {
        //     case '砌体结构':
        //     pieData[0] = {'name':key,'value':data[key]}
        //         break;
        //     case '钢筋混凝土结构':
        //     pieData[1] = {'name':key,'value':data[key]}
        //         break;
        //     case '土木结构':
        //     pieData[2] = {'name':key,'value':data[key]}
        //         break;
        //     case '木结构':
        //     pieData[3] = {'name':key,'value':data[key]}
        //         break;
        //     case '钢结构':
        //     pieData[4] = {'name':key,'value':data[key]}
        //         break;
        //     case '工业厂房':
        //     pieData[5] = {'name':key,'value':data[key]}
        //         break;
        //     case '组合结构':
        //     pieData[6] = {'name':key,'value':data[key]}
        //         break;
        //     case '其他':
        //     pieData[7] = {'name':key,'value':data[key]}
        //         break;
        //     default:
        //         break;
        // }
    })
    echarts.init(document.getElementById('structureType-pie')).dispose() ;
    var m_chartPie = echarts.init(document.getElementById('structureType-pie'));
    var pieOption = {
        // title: {
        //     text: '易损性数据个数',
        //     left: 'center'
        // },
        tooltip: {
            trigger: 'item',
            enterable: true,
            formatter (res) {
              const dom = '<div>'+`${res.data.name}`+ '<br/>'+ `数量：${res.data.value}(个)` + '<br/>' + `占比：${res.percent}(%)` + '</div>'
              return dom
            }
        },
        legend: {
            bottom: 10,
            left: 'center',
            data: structureData()
            // data:['砌体结构','钢筋混凝土结构','土木结构','木结构','钢结构','工业厂房','组合结构','其他']
        },
        color: ['#9479c3', '#5ad8a6', '#9b460c', '#4270c1', '#5b8ff9', '#f6bd16', '#245c8f', '#ee4dd3'],
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '50%',     //半径
                //具体数据
                data: pieData,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
            }
        ]
    }
    m_chartPie.setOption(pieOption);
    window.addEventListener('resize', () => {
        m_chartPie.resize();
    });
}
//设防情况fortification-pie
const buildChartFortificationPie = (data) => {
    const keys = Object.keys(data)
    const pieData = []
    keys.forEach(key => {
        // pieData.push({
        //     name: key,
        //     value: data[key]
        // })
        dataLifeFortificationChange(pieData, data, key)
    })
    echarts.init(document.getElementById('fortification-pie')).dispose() ;
    var m_chartPie = echarts.init(document.getElementById('fortification-pie'));
    var pieOption = {
        // title: {
        //     text: '易损性数据个数',
        //     left: 'center'
        // },
        tooltip: {
            trigger: 'item',
            enterable: true,
            formatter (res) {
              const dom = '<div>'+`${res.data.name}`+ '<br/>'+ `数量：${res.data.value}(个)` + '<br/>' + `占比：${res.percent}(%)` + '</div>'
              return dom
            }
        },
        legend: {
            //orient: 'vertical',
            bottom: 10,
            left: 'center',
            data: lefeFortificationData()
        },
        // color: ['#5ad8a6', '#9479c3', '#5b8ff9', '#f6bd16', "#5ad8a6", '#f17676'],
        color: ['#9479c3', '#5ad8a6', '#9b460c', '#4270c1', '#5b8ff9', '#f6bd16', '#245c8f', '#ee4dd3'],
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '50%',     //半径
                //具体数据
                data: pieData,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
            }
        ]
    }
    m_chartPie.setOption(pieOption);
    window.addEventListener('resize', () => {
        m_chartPie.resize();
    });
}
//用途use-pie
const buildChartUsePie = (data) => {
    const keys = Object.keys(data)
    const pieData = []
    keys.forEach(key => {
        dataUseChange(pieData, data, key)
        // pieData.push({
        //     name: key,
        //     value: data[key]
        // })
    })
    echarts.init(document.getElementById('use-pie')).dispose() ;
    var m_chartPie = echarts.init(document.getElementById('use-pie'));
    var pieOption = {
        // title: {
        //     text: '易损性数据个数',
        //     left: 'center'
        // },
        tooltip: {
            trigger: 'item',
            enterable: true,
            formatter (res) {
              const dom = '<div>'+`${res.data.name}`+ '<br/>'+ `数量：${res.data.value}(个)` + '<br/>' + `占比：${res.percent}(%)` + '</div>'
              return dom
            }
        },
        legend: {
            bottom: 10,
            left: 'center',
            data: useData()
        },
        // color: ['#5ad8a6', '#5b8ff9', '#f6bd16'],
        color: ['#9479c3', '#5ad8a6', '#9b460c', '#4270c1', '#5b8ff9', '#f6bd16', '#245c8f', '#ee4dd3'],
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '50%',     //半径
                //具体数据
                data: pieData,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
            }
        ]
    }
    m_chartPie.setOption(pieOption);
    window.addEventListener('resize', () => {
        m_chartPie.resize();
    });
}

//折线图
//区域region-bar
const buildChartRegionBar = (data) => {
    const keys = Object.keys(data)
    const barData = []
    keys.forEach(key => {
        barData.push({
            name: key,
            value: data[key]
        })
    })
    echarts.init(document.getElementById('region-bar')).dispose();
    var m_chartBar = echarts.init(document.getElementById('region-bar'));
    var barOption = {
        // title: {
        //     text: '易损性数据个数',
        //     left: 'center'
        // },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: 10,
            left: 'center',
        },
        xAxis: {
            type: 'category',
            data: keys,
            axisLabel: {
                interval: 0,
            },
        },
        yAxis: {
            type: 'value',
            name:'数量/个'
        },
        series: [
            {
                type: 'bar',
                //具体数据
                data: barData,
                itemStyle: {
                    color: "#107ce5"
                }
            }
        ]
    }
    // m_chartBar.setOption(barOption);
    window.addEventListener('resize', () => {
        m_chartBar.resize();
    });
}
//年代years-bar
const buildChartYearsBar = (data) => {
    const keys = Object.keys(data)
    const barData = []
    keys.forEach(key => {
        dataYearChangeBuild(barData, data, key)
        // barData.push({
        //     name: key,
        //     value: data[key]
        // })
    })
    echarts.init(document.getElementById('years-bar')).dispose();
    var m_chartBar = echarts.init(document.getElementById('years-bar'));
    var barOption = {
        // title: {
        //     text: '易损性数据个数',
        //     left: 'center'
        // },
        tooltip: {
            trigger: 'item'
        },
        grid: {
          left: '14%',
        },
        legend: {
            bottom: 10,
            left: 'center',
        },
        xAxis: {
            type: 'category',
            data: yearDataBuild(),
            axisLabel: {
                interval: 0,
                rotate: 30
            },
        },
        yAxis: {
            type: 'value',
            name:'数量/个'
        },
        series: [
            {
                type: 'bar',
                //具体数据
                data: barData,
                itemStyle: {
                    normal: {
                        color: function (params) {
                          let colorList = ['#9479c3', '#5ad8a6', '#9b460c', '#4270c1', '#5b8ff9', '#f6bd16', '#245c8f', '#ee4dd3'];
                          let colorItem = colorList[params.dataIndex];
                          return colorItem;
                        }
                    }
                }
            }
        ]
    }
    m_chartBar.setOption(barOption);
    window.addEventListener('resize', () => {
        m_chartBar.resize();
    });
}
//结构类型structureType-bar
const buildChartStructureTypeBar = (data) => {
    const keys = Object.keys(data)
    let barData = []
    keys.forEach(key => {
        dataStructureChange(barData, data, key)
        // barData.push({
        //     name: key,
        //     value: data[key]
        // })
    })
    // barData = getNewArr(barData)
    echarts.init(document.getElementById('structureType-bar')).dispose();
    var m_chartBar = echarts.init(document.getElementById('structureType-bar'));
    var barOption = {
        // title: {
        //     text: '易损性数据个数',
        //     left: 'center'
        // },
        tooltip: {
            trigger: 'item'
        },
        grid: {
          left: '14%',
        },
        legend: {
            bottom: 10,
            left: 'center',
        },
        xAxis: {
            type: 'category',
            data: structureData(),
            axisLabel: {
                interval: 0,
                rotate: 30
            },
        },
        yAxis: {
            type: 'value',
            name:'数量/个'
        },
        series: [
            {
                type: 'bar',
                //具体数据
                data: barData,
                itemStyle: {
                    normal: {
                        color: function (params) {
                          let colorList = ['#9479c3', '#5ad8a6', '#9b460c', '#4270c1', '#5b8ff9', '#f6bd16', '#245c8f', '#ee4dd3'];
                          let colorItem = colorList[params.dataIndex];
                          return colorItem;
                        }
                    }
                }
            }
        ]
    }
    m_chartBar.setOption(barOption);
    window.addEventListener('resize', () => {
        m_chartBar.resize();
    });
}
//设防情况fortification-bar
const buildChartFortificationBar = (data) => {
    const keys = Object.keys(data)
    const barData = []
    keys.forEach(key => {
        dataLifeFortificationChange(barData, data, key)
        // barData.push({
        //     name: key,
        //     value: data[key]
        // })
    })
    echarts.init(document.getElementById('fortification-bar')).dispose();
    var m_chartBar = echarts.init(document.getElementById('fortification-bar'));
    var barOption = {
        // title: {
        //     text: '易损性数据个数',
        //     left: 'center'
        // },
        tooltip: {
            trigger: 'item'
        },
        grid: {
          left: '14%',
        },
        legend: {
            bottom: 10,
            left: 'center',
        },
        xAxis: {
            type: 'category',
            data: lefeFortificationData(),
            axisLabel: {
                interval: 0,
            },
        },
        yAxis: {
            type: 'value',
            name:'数量/个'
        },
        series: [
            {
                type: 'bar',
                //具体数据
                data: barData,
                itemStyle: {
                    normal: {
                        color: function (params) {
                          let colorList = ['#9479c3', '#5ad8a6', '#9b460c', '#4270c1', '#5b8ff9', '#f6bd16', '#245c8f', '#ee4dd3'];
                          let colorItem = colorList[params.dataIndex];
                          return colorItem;
                        }
                    }
                }
            }
        ]
    }
    m_chartBar.setOption(barOption);
    window.addEventListener('resize', () => {
        m_chartBar.resize();
    });
}
//用途use-bar
const buildChartUseBar = (data) => {
    const keys = Object.keys(data)
    const barData = []
    keys.forEach(key => {
        dataUseChange(barData, data, key)
        // barData.push({
        //     name: key,
        //     value: data[key]
        // })
    })
    echarts.init(document.getElementById('use-bar')).dispose();
    var m_chartBar = echarts.init(document.getElementById('use-bar'));
    var barOption = {
        // title: {
        //     text: '易损性数据个数',
        //     left: 'center'
        // },
        tooltip: {
            trigger: 'item'
        },
        grid: {
          left: '14%',
        },
        legend: {
            bottom: 10,
            left: 'center',
        },
        xAxis: {
            type: 'category',
            data: useData(),
            axisLabel: {
                interval: 0,
            },

        },
        yAxis: {
            type: 'value',
            name:'数量/个'
        },
        series: [
            {
                type: 'bar',
                //具体数据
                data: barData,
                itemStyle: {
                    normal: {
                        color: function (params) {
                          let colorList = ['#9479c3', '#5ad8a6', '#9b460c', '#4270c1', '#5b8ff9', '#f6bd16', '#245c8f', '#ee4dd3'];
                          let colorItem = colorList[params.dataIndex];
                          return colorItem;
                        }
                    }
                }
            }
        ]
    }
    m_chartBar.setOption(barOption);
    window.addEventListener('resize', () => {
        m_chartBar.resize();
    });
}

//重置
const onRest = () => {
    params.value = {
        province: params.value.province,
        createStartTime: "", //维护开始时间
        createEndTime: "",//维护结束时间
        userName: "", //维护人
        structureType: "", //结构类型
        fortification: "", //设防情况
        years: "",//年代
        region: "",//区域
        use0: "",//用途
        use1: "",
        city: "",//省
        county: "",//省
    }
    onSearch();
};
getProvinceData();
// 挂载
onMounted(() => {
    setTimeout(() => {
        onSearch();
    }, 200)
    // this.$nextTick(() => {
    //     myChart.resize()
    //     myChart.setOption(option, true);
    // })
});
</script>

<style lang="scss" scoped>
.form-inline {
    .el-form-item {
        margin-right: 0;
    }
}

.region,
.years,
.structureType,
.fortification,
.use {
    //background: #fff;
    //box-shadow: 0 0 15px #4986bf;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 8px;
    opacity: 1;

    h4 {
        font-size: 20px;
        color: #333;
        font-weight: bold;
        //font-family: Microsoft YaHei;
        border-bottom: 1px solid #f3f3f3;
        padding: 15px 0;
        margin: 0;
        cursor: pointer;

        /*CSS伪类用法*/
        //div:after,
        &:before {
            content: "";
            height: 22px;
            width: 7px;
            background: #107ce5;
            border-radius: 0 4px 4px 0;
            display: inline-block;
            margin-right: 15px;
            vertical-align: text-top;
        }
    }
}
</style>


